
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<title>View Students</title>
</h:head>

<f:view>
	<body>
		<ui:composition template="../includes/template.xhtml">
			<ui:define name="mainbody">
				<p:panel id="panel" header="View Students" style="min-height: 550px"
					styleClass="prime_panel">
					<h:form id="form">

						<p:growl id="growl" showDetail="true" sticky="false"
							autoUpdate="true" showSummary="false" />

						<p:dataTable var="student" value="#{viewStudentsBean.students}"
							rowKey="#{student.studentId}" rows="10"
							paginator="true" paginatorPosition="bottom"
							selection="#{viewStudentsBean.selectedStudent}"
							selectionMode="single"	id="studentsTable">

							<p:ajax event="rowSelect" update=":form:display"
								onsuccess="studentDialog.show()" />

							<f:facet name="header">  
					            List of Students  
					        </f:facet>

							<p:column headerText="Student Name" sortBy="#{student.name}"
								filterBy="#{student.name}" id="name">  
					            #{student.name}  
					        </p:column>
					        
					        <p:column headerText="Class" sortBy="#{student.section.clas.classTitle} #{student.section.sectionTitle}"
								filterBy="#{student.section.clas.classTitle} #{student.section.sectionTitle}" id="class">  
					            #{student.section.clas.classTitle} #{student.section.sectionTitle}  
					        </p:column>
					        
					        <p:column headerText="Parent" sortBy="#{student.parent.name}"
								filterBy="#{student.parent.name}" id="parent">  
					            #{student.parent.name}  
					        </p:column>
						</p:dataTable>

						<p:dialog header="Student Detail" widgetVar="studentDialog"
							resizable="false" width="350" height="200"
							showEffect="fade" hideEffect="explode">

							<h:panelGrid id="display" columns="2" cellpadding="4">

								<h:outputText value="Name:" />
								<h:outputText value="#{viewStudentsBean.selectedStudent.name}" id="name" />
								
								<h:outputText value="Class:" />
								<h:outputText value="#{viewStudentsBean.selectedStudent.section.clas.classTitle}
								 #{viewStudentsBean.selectedStudent.section.sectionTitle}" id="section" />
								
								<h:outputText value="Parent:" />
								<h:outputText value="#{viewStudentsBean.selectedStudent.parent.name}" id="parent" />
								
								<h:outputText value="Parent Mobile #:" />
								<h:outputText value="#{viewStudentsBean.selectedStudent.parent.mobileNumber} " id="mobile" />
								
								<h:outputText value="Parent Phone #:" />
								<h:outputText value="#{viewStudentsBean.selectedStudent.parent.phoneNumber}" id="phone" />																								
								
								<h:outputText value="Date of Birth:" />
								<h:outputText value="#{viewStudentsBean.selectedStudent.dob} " id="dob" />
							
							</h:panelGrid>
						</p:dialog>
					</h:form>
				</p:panel>
			</ui:define>
		</ui:composition>
	</body>
</f:view>
</html>